<template>
  <div class="container" :style="{ height: height }">
    <div class="title_container">
      <span class="title"></span>
      <span style="margin-left: 10px; font-size: 20px; color: #1cdbfe">
        改造前后对比</span
      >
    </div>
    <div>
      <el-carousel
        indicator-position="none"
        :interval="5000"
        arrow="always"
        height="360px"
      >
        <el-carousel-item
          v-for="(item, index) in remodelCompareData"
          :key="index"
        >
          <div style="display: flex; align-items: center; justify-content: end">
            <span>
              <img
                v-if="item.sex == '0'"
                src="../../../assets/img/man.png"
                style="height: 40px; width: 40px"
              />
              <img
                v-if="item.sex == '1'"
                src="../../../assets/img/woman.png"
                style="height: 40px; width: 40px"
              />
            </span>
            <span
              style="
                font-weight: 400;
                font-size: 18px;
                color: #ffffff;
                margin-left: 10px;
              "
              ><span>{{ item.applyName }}</span>
              <span
                >（{{ item.sex == "0" ? "男" : "女" }}/{{ item.age }}岁）</span
              ></span
            >
          </div>
          <el-row style="margin-top: 10px" :gutter="15">
            <el-col :span="12">
              <div style="display: flex; justify-content: right">
                <div
                  style="
                    width: 95%;
                    height: 100%;
                    background: #040535;
                    border-radius: 8px;
                    border: 3px solid #084fa0;
                    position: relative;
                  "
                >
                  <el-carousel height="300px" arrow="never" :interval="5000">
                    <el-carousel-item
                      v-for="(i, index) in item.remodelBeforeURLList"
                      :key="index"
                    >
                      <div>
                        <el-image
                          style="width: 100%; height: 98%"
                          :src="i"
                          fit="cover"
                        />
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                  <div
                    style="
                      height: 50px;
                      width: 100%;
                      position: absolute;
                      bottom: 0px;
                      font-size: 21px;
                      font-weight: bold;
                      display: flex;
                      align-items: center;
                      padding-left: 15px;
                      background: rgba(8, 79, 160, 0.5);
                      color: #ffffff;
                      z-index: 1;
                      border-bottom-right-radius: 8px;
                      border-bottom-left-radius: 8px;
                    "
                  >
                    改造前
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="display: flex">
                <div
                  style="
                    background: #040535;
                    width: 95%;
                    height: 100%;
                    border-radius: 8px;
                    border: 3px solid #4fa6f7;
                    position: relative;
                  "
                >
                  <el-carousel height="300px" arrow="never" :interval="1000">
                    <el-carousel-item
                      v-for="(i, index) in item.remodelAfterURLList"
                      :key="index"
                    >
                      <el-image
                        style="width: 100%; height: 100%"
                        :src="i"
                        fit="cover"
                      />
                    </el-carousel-item>
                  </el-carousel>
                  <div
                    style="
                      height: 50px;
                      width: 100%;
                      position: absolute;
                      bottom: 0px;
                      font-size: 21px;
                      font-weight: bold;
                      display: flex;
                      align-items: center;
                      padding-left: 15px;
                      background: rgba(28, 219, 254, 0.5);
                      color: #ffffff;
                      z-index: 1;
                      border-bottom-right-radius: 8px;
                      border-bottom-left-radius: 8px;
                    "
                  >
                    改造后
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
import { getRemodelCompare } from '@/api/dataScreen/index';
export default {
  data() {
    return {
      height: "420px",
      remodelCompareData: [],
    };
  },
  props: {
    isFullscreen: {
      type: Boolean,
      default: false,
    },
  },
  // watch: {
  //   isFullscreen: {
  //     handler(newValue, oldValue) {
  //       if (newValue == true) {
  //         this.height = '440px';
  //       } else {
  //         this.height = '420px';
  //       }
  //     },
  //   },
  // },
  methods: {
    initData() {
      getRemodelCompare().then((res) => {
        this.remodelCompareData = res.remodelCompare
      });
    },
    // 根据数值大小返回气泡的大小
  },
  mounted() {
    this.initData()
  },
};
</script>
<style scoped lang="scss">
.container {
  //height: 420px;
  padding: 10px 20px;
  position: relative;
  //background: #06073B;
  border-radius: 7px;
  box-shadow: rgb(8, 79, 160) 0px 0px 40px inset;
  border: 2px solid rgb(8, 79, 160);
  background-color: transparent;
  .title_container {
    display: flex;
    align-items: center;
    .title {
      width: 13px;
      height: 27px;
      background: #1cdbfe;
      border-radius: 6px;
      display: inline-block;
    }
  }

  :deep(.el-carousel__arrow--left) {
    left: -5px;
    font-size: 30px;
    background: none;
    font-weight: bolder;
  }
  :deep(.el-carousel__arrow--right) {
    right: -5px;
    font-size: 30px;
    background: none;
  }

  :deep(.el-carousel__indicators) {
    // 指示灯位置
    left: unset;
    transform: unset;
    right: 2%;
    bottom: 12px;
  }
  :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: #040535;
    border: 2px solid white;
    border-radius: 50%;
    opacity: 0.3;
  }
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    opacity: 1;
  }
}
</style>
